<?php
use yesf\Yesf;
?>
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>WeChatGateway管理面板</title>
	<link rel="stylesheet" href="https://fonts.geekzu.org/css?family=Roboto:300,400,500,700,400italic|Material+Icons" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-material@1.0.0-beta-10.2/dist/vue-material.min.css" />
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-material@1.0.0-beta-10.2/dist/theme/default.css" />
	<link rel="stylesheet" href="<?=$__PUBLIC_URL?>admin.css" />
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-material@1.0.0-beta-10.2/dist/vue-material.min.js"></script>
</head>
<body>
	<div id="app">
		<md-app md-waterfall>
			<md-app-toolbar class="md-primary">
				<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
					<md-icon>menu</md-icon>
				</md-button>
				<span class="md-title">WeChatGateway管理面板</span>
			</md-app-toolbar>
			<md-app-drawer :md-active.sync="menuVisible" md-persistent="full">
				<md-list>
					<md-list-item @click="switchPage('config')">
						<md-icon>settings</md-icon>
						<span class="md-list-item-text">设置</span>
					</md-list-item>
					<md-list-item @click="switchPage('app')">
						<md-icon>apps</md-icon>
						<span class="md-list-item-text">应用管理</span>
					</md-list-item>
					<md-list-item @click="loginout">
						<md-icon>exit_to_app</md-icon>
						<span class="md-list-item-text">退出登录</span>
					</md-list-item>
					<md-list-item href="https://github.com/NeuShimmer/WeChatGateway" target="_blank">
						<md-icon>open_in_new</md-icon>
						<span class="md-list-item-text">帮助</span>
					</md-list-item>
					<md-list-item href="https://mp.weixin.qq.com/" target="_blank">
						<md-icon>open_in_new</md-icon>
						<span class="md-list-item-text">微信公众平台</span>
					</md-list-item>
				</md-list>
			</md-app-drawer>
			<md-app-content v-show="activePage == 'config'">
				<md-button class="with-icon" @click="loadConfig"><md-icon>refresh</md-icon>刷新</md-button>
				<md-button class="with-icon" @click="saveConfig"><md-icon>save</md-icon>保存</md-button>
				<md-button class="with-icon" @click="changePassword"><md-icon>vpn_key</md-icon>修改密码</md-button>
				<div class="config-form">
					<md-field v-for="c of config" :key="c.id">
						<label :for="`config_${c.id}`">{{c.name}}</label>
						<md-input :id="`config_${c.id}`" v-model="c.value"/>
					</md-field>
				</div>
			</md-app-content>
			<md-app-content v-show="activePage == 'app'">
				<md-button class="with-icon" @click="loadApp"><md-icon>refresh</md-icon>刷新</md-button>
				<md-button class="with-icon" @click="editApp(null)"><md-icon>create_new_folder</md-icon>新建</md-button>
				<md-table>
					<md-table-row>
						<md-table-head md-numeric>ID</md-table-head>
						<md-table-head>类型</md-table-head>
						<md-table-head>名称</md-table-head>
						<md-table-head>AppID</md-table-head>
						<md-table-head>操作</md-table-head>
					</md-table-row>
					<md-table-row v-for="a of app" :key="a.id">
						<md-table-cell md-numeric>{{a.id}}</md-table-cell>
						<md-table-cell>{{a.type == 1 ? "公众号" : "小程序"}}</md-table-cell>
						<md-table-cell>{{a.name}}</md-table-cell>
						<md-table-cell>{{a.appid}}</md-table-cell>
						<md-table-cell>
							<md-button class="with-icon" @click="showSecret(a.appsecret)"><md-icon>vpn_key</md-icon>查看Secret</md-button>
							<md-button class="with-icon" @click="editApp(a)"><md-icon>edit</md-icon>编辑</md-button>
							<md-button class="with-icon" @click="delApp(a)"><md-icon>delete</md-icon>删除</md-button>
						</md-table-cell>
					</md-table-row>
				</md-table>
			</md-app-content>
		</md-app>
		<md-dialog :md-active="showLogin" :md-close-on-esc="false" :md-click-outside-to-close="false">
			<md-dialog-title>登录</md-dialog-title>
			<div style="text-align:center" v-show="status == 0"><md-progress-spinner md-mode="indeterminate" ></md-progress-spinner></div>
			<md-dialog-content v-show="status == 1">
				<md-field>
					<label>密码</label>
					<md-input v-model="password"></md-input>
				</md-field>
			</md-dialog-content>
			<md-dialog-actions v-show="status == 1">
				<md-button class="md-primary" @click="tryLogin">登录</md-button>
			</md-dialog-actions>
		</md-dialog>
		<md-dialog-prompt
			:md-active.sync="newPassword.show"
			v-model="newPassword.value"
			md-title="修改密码"
			md-input-maxlength="30"
			md-input-placeholder="输入新密码"
			@md-confirm="changePasswordSubmit">
		</md-dialog-prompt>
		<md-dialog :md-active.sync="edit_app.show">
			<md-dialog-title>编辑/新建</md-dialog-title>
			<md-dialog-content>
				<md-field>
					<label>名称</label>
					<md-input v-model="edit_app.name"></md-input>
				</md-field>
				<md-field>
					<label>类型</label>
					<md-select v-model="edit_app.type">
						<md-option :value="1">公众号</md-option>
						<md-option :value="2">小程序</md-option>
					</md-select>
				</md-field>
				<md-field>
					<label>AppID</label>
					<md-input v-model="edit_app.appid"></md-input>
				</md-field>
				<md-field>
					<label>AppSecret</label>
					<md-input v-model="edit_app.appsecret"></md-input>
				</md-field>
			</md-dialog-content>
			<md-dialog-actions>
				<md-button class="md-primary" @click="edit_app.show = false">取消</md-button>
				<md-button class="md-primary" @click="editAppSave">保存</md-button>
			</md-dialog-actions>
		</md-dialog>
		<md-dialog-alert
			:md-active.sync="show_secret.show"
			:md-content="show_secret.content" />
		<md-snackbar md-position="center" :md-duration="3000" :md-active.sync="toast.show" md-persistent>
			<span>{{toast.message}}</span>
		</md-snackbar>
	</div>
	<script>var BASE_URI='<?=Yesf::getBaseUri()?>';</script>
	<script src="<?=$__PUBLIC_URL?>admin.js"></script>
</body>
</html>